<template>
  <view class="content">
    <view class="box shadow">
      <u--form
        labelPosition="left"
        labelAlign="left"
        :model="repairForm"
        labelWidth="80"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item label="报修区域" prop="repairForm.area" :required="true">
          <u--input v-model="repairForm.area" border="surround"></u--input>
        </u-form-item>
        <u-form-item label="报修人：" prop="repairForm.user">
          <u--input v-model="repairForm.user" border="surround"></u--input>
        </u-form-item>
        <u-form-item label="联系方式" prop="repairForm.concat">
          <u--input v-model="repairForm.concat" border="surround"></u--input>
        </u-form-item>
        <u-form-item
          label="问题描述"
          prop="repairForm.describe"
          :required="true"
        >
          <u--textarea
            v-model="repairForm.describe"
            border="surround"
          ></u--textarea>
        </u-form-item>
        <u-form-item label="图片上传">
          <u-upload
            :fileList="fileList"
            multiple
            accept="image"
            :maxCount="10"
            :previewImage="true"
          >
            <view class="upload-custom">
              <u-icon name="plus"></u-icon>
              <text>上传图片</text>
            </view>
          </u-upload>
        </u-form-item>
      </u--form>
      <view class="submit">
        <u-button
          text="提交"
          shape="circle"
          color="linear-gradient(180deg, #447FD7 0%, #001A70 100%)"
        ></u-button>
      </view>
    </view>
  </view>
</template>
<script>
import variables from "../../../static/style/index.scss";
export default {
  data() {
    return {
      variables: variables,
      repairForm: {
        area: "",
        user: "",
        concat: "",
        describe: "",
        img: "",
      },
      fileList: [],
      rules: {
        "repairForm.area": {
          type: "string",
          required: true,
          message: "报修区域",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  mounted() {
    console.log({ variables });
  },
  methods: {
    afterRead(file, lists) {
      console.log(file, lists);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
